

Una vez definido el tipo de usuarios que har\'a uso de la aplicaci\'on y investigado sobre las diferentes maneras de satisfacer las necesidades del usuario, se empez\'o a pensar sobre las funciones que la aplicaci\'on deber\'ia tener y como implementarlas. 

Como funci\'on principal encontramos el etiquetado de im\'agenes con formas b\'asicas como podr\'ia ser un cuadrado o un c\'irculo. Para poder implementar dicha funci\'on se necesit\'o una interfaz para el usuario y un sistema de c\'odigo robusto que evitase los posibles errores que pudiera causar la interacci\'on del mismo.
Para poder definir la estructura de la interficie y del c\'odigo propiamente dicho, primero, como se mencion\'o anteriormente, se tubo que pensar las funciones que podr\'ia realizar el usuario y el proceso que seguir\'ia para realizar dichas acciones. Dicho proceso se resume en lo siguiente:

\pagebreak

\begin{itemize}

	\item 0 Cargar Im\'agenes
\begin{itemize}
		\item 0.1 Pulsar sobre el bot\'on Cargar
		\item 0.2 Seleccionar la carpeta que contiene las im\'agenes
		\item 0.3 Pulsar Aceptar
		\item 0.4 El sistema muestra las im\'agenes
\end{itemize}
	\item 1 Seleccionar una herramienta
\begin{itemize}
		\item1.1 Pulsar sobre una herramienta
		\item1.2 Mirar las instrucciones en pantalla
\end{itemize}
	\item 2 Crear una etiqueta
\begin{itemize}
		\item2.1 Pulsar tantas veces como se indique en la ayuda sobre la imagen
		\item2.2 El sistema guarda la etiqueta
\end{itemize}
	\item 3 Mover una etiqueta
\begin{itemize}
		\item3.1 Pulsar sobre el bot\'on Mover
		\item3.2 Acercar el rat\'on a la etiqueta hasta que aparezca de color rojo
		\item3.3 Presionar y arrastrar el rat\'on a la nueva posici\'on
		\item3.4 El sistema modifica la posici\'on de la etiqueta
\end{itemize}
	\item 4 Eliminar una etiqueta
\begin{itemize}
		\item4.1 Presionar sobre el bot\'on Eliminar
		\item4.2 Acercar el rat\'on a la etiqueta hasta que aparezca de color rojo
		\item4.3 Presionar el rat\'on para eliminar dicha etiqueta
		\item4.4 El sistema elimina la etiqueta
\end{itemize}

\pagebreak

	\item 5 Recuperar una etiqueta eliminada
\begin{itemize}
		\item5.1 Presionar el bot\'on Recuperar
		\item5.2 El sistema recupera la etiqueta
\end{itemize}
	\item 6 Seleccionar una imagen diferente para etiquetar
\begin{itemize}
		\item6.1 Presionar sobre la barra deslizante para seleccionar aproximadamente la imagen
		\item6.2 Presionar sobre la imagen
		\item6.3 El sistema cambia la imagen actual por la seleccionada
\end{itemize}
	 \item 7 Guardar las etiquetas
\begin{itemize}
		\item7.1 Presionar sobre el bot\'on Guardar
		\item7.2 El sistema guarda las etiquetas en formato XML
\end{itemize}

\end{itemize}

Como podemos observar, hemos definido las funcionalidades b\'asicas de nuestro sistema, que a simple vista pueden ser \'utiles, si no para todos, para la mayor\'ia de los usuarios que utilicen el programa. Por lo tanto podemos afirmar que la aplicaci\'on, una vez desarrollada ser\'a \'util, pero no podemos afirmar que sea utilizable.
Una vez tenemos claras las funciones que deber\'a incorporar el programa, pensamos como estar\'a dise\~{n}ada la interficie para, en funci\'on de dicho dise\~{n}o, modular el c\'odigo para poder modificar cada parte de la interifice por separado.

Como elementos de la interficie b\'asicos, se supo que debi\'o contener un \'area de trabajo, en la cual el usuario ver\'a la imagen seleccionada y podr\'a definir nuevas etiquetas.Tambi\'en se incluy\'o una barra lateral derecha en la que se encontrar\'ian las herramientas con apariencia de botones para que el usuario las pueda seleccionar. Para poder cambiar de imagen se a\~{n}adi\'o una barra deslizante inferior en la que se muestran dichas im\'agenes en miniatura. Por \'ultimo se implement\'o una barra de men\'us en la parte superior de la ventana y un espacio de ayuda donde se muestra la posible ayuda que el usuario necesite para cada una de las funciones del sistema.
En el siguiente cap\'itulo mencionaremos los diversos prototipos implementados de la interficie de la aplicaci\'on, las correcciones que fueron necesarias aplicar para mejorar la interacci\'on del usuario y las funciones a\~{n}adidas durante el proceso de desarrollo.

\pagebreak

\section{Primer prototipo}
En la implementaci\'on del primer prototipo, se implementaron las funcionalidades b\'asicas del sistema, es decir, la interficie permit\'ia cargar las im\'agenes y definir etiquetas sobre ellas. La interficie se dividi\'o en la barra de herramientas lateral, en la que aparec\'ian las im\'agenes de los tipos de etiqueta diferentes de los que dispon\'iamos y el explorador de im\'agenes en la parte inferior, en el cual solamente se observaban las im\'agenes redimensionadas para que cupiesen todas. Por \'ultimo se a\~{n}adi\'o dos botones para poder pasar a la imagen siguiente y la anterior justo al lado de la imagen actual con la que est\'a trabajando el usuario.

\begin{figure}[here]
    \centering
    \includegraphics[scale=0.3]{figuras/version1.jpg}
 \caption{Prototipo 1}
\end{figure}


El objetivo del primer prototipo era implementar un boceto de lo que ser\'ia la interficie para a partir de ah\'i poder ir incluyendo mejoras y funciones y reordenando la interficie. Por supuesto, el primer prototipo no cumpl\'ia con las funciones que se han mencionado anteriormente ya que ni si quiera implementava la posibilidad de guardar las etiquetas. 

Una vez finalizado el primer prototipo se pas\'o a analizar las escaseces del programa. La m\'as obvia de ellas es que no implementa todas las funcionalidades desadas, pero, como se ha mencionado anteriormente, el primer prototipo solo sirvi\'o para empezar a desarrollar una peque\~{n}a interfaz o {\em mockup} en el cual se indicaran los elementos b\'asicos de la misma. Otro de los errores que se encontr\'o es que los botones que permiten avanzar y retroceder en las im\'agenes estaban mal posicionados, ya que si trabajamos con una imagen muy grande, dichos activadores interfieren con esta. Tambi\'en se debi\'o modificar el hecho de que en la barra deslizante de la parte inferior se dimensionaban las im\'agenes para caber todas en el espacio limitado del que dispon\'iamos. Cabe tambi\'en mencionar que los colores eran simplemente un boceto al igual que la ausencia de la barra de men\'us superior.

\section{Segundo prototipo}
En la implementaci\'on del segundo prototipo de la aplicaci\'on, se mejoraron aspectos como el desarrollo de m\'as tipos de etiquetas como pueden ser la etiqueta cuadrada y la circular. A su vez se a\~{n}adieron los activadores que permiten cargar y guardar im\'agenes y etiquetas. Posteriormente se implement\'o una barra deslizante completamente funcional para que las im\'agenes no se tuvieran que redimensionar hasta el extremo para que entraran todas en el mismo espacio. Por \'ultimo se eliminaron los botones que permit\'ian avanzar y retroceder una imagen puesto que la barra deslizante era m\'as efectiva para dicho fin.

\begin{figure}[here]
    \centering
    \includegraphics[scale=0.3]{figuras/version2.jpg}
 \caption{Prototipo 2}
\end{figure}

Aunque se han mejorado e implementado bastantes aspectos respecto a la versi\'on anterior y ya disponemos de un prototipo m\'as s\'olido que cumple con la funci\'on b\'asica del etiquetador ( Cargar y guardar etiquetas ) , para el usuario segu\'ia sin ser para nada intuitivo, puesto que no estaban controlados todos los errores ni implementadas todas las funcionalidades del programa. Uno de los aspectos que m\'as influyen en la desmotivaci\'on del usuario para utilizar la aplicaci\'on es que no existe ning\'un tipo de ayuda con la cual pueda llegar a entender lo que est\'a sucediendo o en que estado se encuentra el sistema. Es por eso que un requisito indispensable que se debi\'o a\~{n}adir en futuras versiones fue un sistema de ayuda intuitivo para el usuario. Pese a que las im\'agenes est\'an dispuestas en una barra deslizante y siempre toman el mismo tama\~{n}o, dicho proceso crea un efecto de deformidad en la imagen no deseado que tambi\'en debi\'o ser debidamente solucionado. Por otro lado, pese a que los colores fueron cambiados y mejorados con el dise\~{n}o mediante una herramienta de dise\~{n}o fotogr\'afico, resultaron no ser los adecuados para la comodidad del usuario .Cabe mencionar que se crey\'o que se deber\'ia implementar las funcionalidades anteriormente mencionadas de poder mover y eliminar una etiqueta ya creada.

\section{Tercer prototipo}

En el tercer prototipo se corrigieron errores de la versi\'on anterior, como el dise\~{n}o de los espacios de la inteficie, y se a\~{n}adieron funcionalidades nuevas, como la eliminaci\'on de etiquetas. Para realizar la eliminaci\'on de etiquetas, se contempl\'o la idea de que el usuario, como se ve en la figura a continuaci\'on, se viera obligado a introducirle un nombre a cada una de las etiquetas que defin\'ia, para as\'i , en la caja de la izquierda poder presionar sobre la etiqueta deseada permitiendo as\'i borrarla, pero como se ha comentado con anterioridad, la caja de selecci\'on de etiqueta se haya ubicada en una posici\'on cr\'itica para las im\'agenes suficientemente grandes. A dem\'as se tubo en cuenta que, no se puede pretender que un usuario defina cada una de las etiquetas cuando etiqueta cientos de im\'agenes, puesto que, al final, no todas las etiquetas serán relevantes. Por lo tanto se tom\'o la determinaci\'on de que no hac\'ia falta nombrar a las etiquetas porqu\'e no es relevante. Sin embargo, sí que resulta importante el tipo de etiqueta del que se trata, es decir, un cuadrado puede ser una cabeza o una mano.
Como se puede observar en la figura, tambi\'en se introdujo la posibilidad de poder definir restricciones sobre las etiquetas que el usuario est\'a definiendo. Pero esto se hace de una forma muy poco natural, ya que si un usuario quiere definir una restricci\'on sobre una etiqueta, el mismo deber\'ia indicarla en el campo que se haya a la izquierda del area de trabajo y por consiguiente, introducirlo para cada etiqueta, y por supuesto, eso es una perdida de tiempo para el usuario final. Por supuesto ni que mencionar cabe que dichos campos tambi\'en se hayan en una posici\'on cr\'itica para im\'agenes suficientemente grandes.Por ultimo, cabe mencionar que se prob\'o un nuevo dise\~{n}o tanto como para las herramientas disponibles como para los diferentes men\'us y, dicho dise\~{n}o quedo como definitivo, excepto por las herramientas que, al ser dibujos no daban a entender suficiente su significado.

\begin{figure}[here]
    \centering
    \includegraphics[scale=0.3]{figuras/version3.jpg}
 \caption{Prototipo 3}
\end{figure}

\section{Cuarto prototipo}

El cuarto prototipo resulto ser el \'ultimo antes de llegar a la versi\'on final. En el, se mejoran aspectos como, la adici\'on de un sistema de ayuda que guiara al usuario por las diferentes pantallas y funciones o, la adici\'on de nuevos tipos de etiquetas y la personalizaci\'on para usuarios expertos de los tipos de etiquetas disponibles. Tambi\'en se agreg\'o en la cuarta versi\'on la posibilidad de mover, eliminar o recuperar una etiqueta cualquiera. Para ello, el usuario deb\'ia presionar sobre el bot\'on correspondiente y acercarse a la etiqueta con tal de que se iluminara de color rojo y presionar la etiqueta o las teclas de direcci\'on el teclado seg\'un la funci\'on escogida. Por \'ultimo se adicion\'o la posibilidad de ampliar las im\'agenes para gozar de mayor precisi\'on y se cambi\'o el dise\~{n}o de los botones para que fuesen m\'as comprensibles.

No obstante, el cuarto prototipo no es la versi\'on final y por tanto, se hallaron \'items a mejorar. Por ejemplo, para mover una etiqueta, el usuario deb\'ia presionar primero la misma para seleccionarla aunque dicha etiqueta ya estaba iluminada de rojo y ademas, deb\'ia utilizar las teclas del teclado para moverla en lugar del rat\'on. Tambi\'en se crey\'o que pese a anunciar en la barra de ayuda el estado en el que se encontraba el sistema, se deb\'ia iluminar la herramienta seleccionada de otro color. Adem\'as de dibujar en un panel de previsualizaci\'on un ejemplo del tipo de etiqueta seleccionada para que el usuario, a simple vista, pudiese ver lo que estaba haciendo. Como se ha mencionado anteriormente se debieron modificar las im\'agenes que se muestran en la barra inferior para que mantuviesen siempre las proporciones.

\begin{figure}[here]
    \centering
    \includegraphics[scale=0.3]{figuras/version42.jpg}
 \caption{Prototipo 4.1}
\end{figure}
\begin{figure}[here]
    \centering
    \includegraphics[scale=0.3]{figuras/version4.jpg}
 \caption{Prototipo 4.2}
\end{figure}

\section{Versi\'on Final}
En la versi\'on final se solventaron todos los incidentes comentados anteriormente. Se a\~{n}adi\'o la posibilidad de mover las etiquetas con el uso del rat\'on, se modific\'o la previsualizaci\'on de las im\'agenes para que mantuviesen las proporciones, se adicion\'o la previsualizaci\'on de etiquetas as\'i ,y por \'ultimo se modific\'o la selecci\'on de etiquetas. Comentar que se propuso que, como forma m\'as natural de hacerlo, al definir una etiqueta de forma cuadrada o circular, el usuario solo tuviese que presionar una vez el rat\'on, arrastrarlo hasta la posici\'on deseada, y soltarlo para definir la etiqueta en cuesti\'on. No se adopt\'o dicha medida porque de ser as\'i, el usuario deber\'ia acostumbrarse a que, para definir pol\'igonos y secuencias de puntos, el sistema de definici\'on es diferente, y por lo tanto, al no implementarse, el sistema qued\'o m\'as homogeneo. Por \'ultimo se mejor\'o la resoluci\'on de la pantalla haciendo que se adaptase a la que cada usuario tuviese definida en su computadora.

\begin{figure}[here]
    \centering
    \includegraphics[scale=0.2]{figuras/version5.jpg}
 \caption{Version final}
\end{figure}

\pagebreak
Como se puede comprobar, en la \'ultima versi\'on implementada, se cumplen todas las reglas de la Heuristica de Nelsen.
El usuario encuentra a simple vista varios items que le muestran la informaci\'on del estado en el que se encuentra el sistema. Estas son los activadores de los men\'us o de las herramientas iluminadas, el ejemplo de etiqueta en el \'area de notificaci\'on o la ayuda pertinente de la acci\'on que est\'a realizando. Las palabras utilizadas para comunicarse con el usuario final han sido escritas en ingl\'es para poder llegar a la mayor parte de usuarios del mundo, as\'i como se utilizaron palabras simples para describir los tipos de etiqueta y las acciones de los men\'us. Si el usuario por error define o elimina una etiqueta, siempre puede borrarla o recuperarla a su antojo, es decir, siempre dispone de una alternativa para cada una de sus acciones.
 El sistema est\'a robustamente implementado previendo cualquier tipo de error por parte del usuario, esto es, el usuario no puede realizar ninguna acci\'on en ning\'un momento para la cual el programa no sepa que hacer. Se han a\~{n}adido elementos muy visibles y en lugares estrat\'egicos para que el usuario no tenga que recordar donde se hallaban cada una de las funciones del etiquetador. Como hemos ido mencionando, durante el proceso de desarrollo de la interficie se modific\'o el dise\~{n}o para que adquiriese una forma minimalista con la que el usuario se encontrara a gusto. Por \'ultimo se implement\'o un sistema de ayuda para el momento de la ejecuci\'on, as\'i como un extenso manual de usuario con la explicaci\'on de todas las funcionalidades, errores y soluciones.
